<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录框特效</title>

<style type="text/css">
 body{
     width:915px;
     margin:0px auto;
     background:url(images/back.jpg);
     font-size:14px;
 }
 td{
     height:35px;
     line-height:30px;
 }
 .right{
     text-align:right;
 }
 .center{
     text-align:center;
 }
 .border{
     border:1px solid #000;
     color:#CCC;
 }

</style>
<!-- 记得导入jquery文件! -->
<script>
 //训练要点
 //（1）掌握事件绑定方法
 //（2）掌握获得焦点和失去焦点事件
 //（3）掌握文本框值的判断

 //实现思路及步骤
 //（1）设置文本框初始值，并设置文字颜色为“#ccc”。
 //（2）文本框获得焦点时，如果文本框的值为默认值，则清空文本框内容。
 //（3）文本框失去焦点时，如果文本框的值为空，则让文本框的值重新设置为默认值。
 
 //--------------在此开始你的代码--------------------
    



 //--------------在此结束你的代码--------------------

</script>
</head>

<body>
<div id="top"><img src="images/image1.jpg"/></div>
<h3>首页—登录</h3>
<table width="30%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="right">用户名：</td>
    <td><input type="text" id="address" value="请输入邮箱地址" class="border"/></td>
  </tr>
  <tr>
    <td class="right">密&nbsp;&nbsp;码：</td>
    <td><input type="text" id="password" value="请输入邮箱密码" class="border"/></td>
  </tr>
  <tr>
    <td colspan="2" class="center"><input type="button" value="登  陆"/></td>
   
  </tr>
</table>

</body>
</html>
